<template>
  <view class="repair-page">
    <!-- 维修信息 -->
    <view class="repair-section">
      <view class="repair-title">维修信息</view>
      <view class="repair-divider"></view>
      <view class="repair-info-row"><text class="repair-info-label">维修单号：</text><text class="repair-info-value">3535252</text></view>
      <view class="repair-info-row"><text class="repair-info-label">维修状态：</text><text class="repair-info-value cancel">已取消</text></view>
      <view class="repair-info-row"><text class="repair-info-label">车主姓名：</text><text class="repair-info-value">张</text></view>
      <view class="repair-info-row"><text class="repair-info-label">联系方式：</text><text class="repair-info-value">1993829282</text></view>
      <view class="repair-info-row"><text class="repair-info-label">维修方式：</text><text class="repair-info-value">上门取车</text></view>
      <view class="repair-info-row"><text class="repair-info-label">取车位置：</text><text class="repair-info-value">山阳区32号</text></view>
      <view class="repair-info-row"><text class="repair-info-label">预约日期：</text><text class="repair-info-value">2022/11/10 11:00</text></view>
      <view class="repair-info-row"><text class="repair-info-label">提交日期：</text><text class="repair-info-value">2022/11/08 12:34</text></view>
    </view>
    <!-- 车辆信息 -->
    <view class="repair-section">
      <view class="repair-title">车辆信息</view>
      <view class="repair-divider"></view>
      <view class="repair-info-row"><text class="repair-info-label">车辆类型：</text><text class="repair-info-value">大客车</text></view>
      <view class="repair-info-row"><text class="repair-info-label">车牌号：</text><text class="repair-info-value">豫J45323</text></view>
      <view class="repair-info-row">
        <text class="repair-info-label">整车照片：</text>
        <image class="repair-car-img" src="/static/car1.png" mode="aspectFill"></image>
      </view>
      <view class="repair-info-row">
        <text class="repair-info-label">维修部位照片：</text>
        <view class="repair-car-img-list">
          <image v-for="i in 3" :key="i" class="repair-car-img" src="/static/car1.png" mode="aspectFill"></image>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
}
</script>

<style>
.repair-page {
  background: #fafafa;
  min-height: 100vh;
  padding-bottom: 120rpx;
}
.repair-section {
  background: #fff;
  border-radius: 32rpx;
  margin: 32rpx 24rpx 0 24rpx;
  padding: 32rpx 32rpx 18rpx 32rpx;
  box-shadow: 0 8rpx 32rpx rgba(35,138,255,0.04);
}
.repair-title {
  font-size: 32rpx;
  color: #222;
  font-weight: bold;
  margin-bottom: 12rpx;
}
.repair-divider {
  height: 2rpx;
  background: #f2f2f2;
  margin-bottom: 18rpx;
  border-radius: 2rpx;
}
.repair-info-row {
  display: flex;
  align-items: center;
  margin-bottom: 14rpx;
}
.repair-info-label {
  color: #222;
  font-size: 28rpx;
  min-width: 180rpx;
  font-weight: 500;
}
.repair-info-value {
  color: #b0b0b0;
  font-size: 28rpx;
  margin-left: 8rpx;
}
.repair-info-value.cancel {
  color: #238aff;
  font-weight: bold;
}
.repair-car-img {
  width: 120rpx;
  height: 120rpx;
  border-radius: 16rpx;
  margin-left: 8rpx;
  margin-top: 8rpx;
  background: #f7f7f7;
}
.repair-car-img-list {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: 8rpx;
}
</style> 